<template>
	<view class="">
		<view class="return-bar" @click="returnBar">
			<image :style="{marginTop:(returnBarTop) + 'px',height:(returnBarHeight - 10) + 'px'}"
				src="../../static/return.png" mode=""></image>
		</view>
		<view v-if="mask" class="mask"></view>
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
			:vertical="true" @animationfinish="animationfinish" @change="change" :current="current"
			:indicator-dots="false">
			<swiper-item v-for="(list,index) in collectList" :key="index">
				<view v-if="Math.abs(k-index)<=1">
					<view>
						<!-- 
						1.v-if：用于控制视频在节点的渲染数
						2.muted的默认值是 false，代表默认是禁音视频的
						3.http-cache默认开启视频缓存
						4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
						5.show-loading：这里默认去掉播放转圈的标志
						v-if="Math.abs(k-index)<=1"
						 -->
						<video v-show="isShow" :id="list.id+''+index" :loop="true" :muted="list.isplay" :http-cache="true"
							:controls="list.is_pay === 0" :page-gesture="false" :show-fullscreen-btn="true" :custom-cache='false'
							:direction="-90" :objectFit="'cover'" :show-loading="false" :show-center-play-btn="false"
							:src="list.url" @ended="ended" @click="tapVideoHover(list.state,$event)" 
							:style="'width: '+ windowWidth +'px; height: '+ (windowHeight - 55) +'px; background-color: #000000; z-index: 0;'"></video>
					</view>
					<!-- 播放状态：pause 的时候就会暂停 -->
					<view class="videoHover flex" @click="tapVideoHover(list.state,$event)"
						:style="'width: '+ windowWidth +'px;'">
						<image v-if="list.state=='pause'" class="playState" src="@/static/img/index/play.png"></image>
					</view>
					<!-- 反馈 -->
					<view :class="isofficial_account ? 'account_feedback':'feedback'" @click="isFeedbackPopup = true">
						反馈
					</view>
					<van-popup :show="isFeedbackPopup" position="bottom" round custom-style="height: 68%;z-index:101;"
						@close="isFeedbackPopup = false" :safe-area-inset-bottom="true">
						<FeedbackInfo :videoType="9"></FeedbackInfo>
					</van-popup>
					<view class="userInfo">
						<!-- 1.头像 -->
						<!-- 	<view @click.stop="clickImage(list)">
							<image @click="tozuozhe" class="userAvatar" :src="admin.cover" mode="aspectFill"></image>
							<view class="add-follow-btn" v-if="!admin.concern">
								<i class="iconfont iconjia1 inline-block"></i>
							</view>
						</view> -->
						<view class="userAvatar"></view>
						<!-- 2.点赞 -->
						<!-- 	<view @click="cLike(list,index);" class="flex" style="opacity: 0.9; margin-top: 17px;">
							<image v-if="list.is_love == 1" src="@/static/img/index/xin.png"
								style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
							<image v-if="list.is_love == 0" src="@/static/img/index/xin-2.png"
								style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
							<text
								style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;"
								:class="{'likeNumActive':list.love}">{{list.give_count}}</text>
						</view> -->
						<!-- 3.分享 -->
						<view class="flex" style="opacity: 0.9; margin-top: 17px;position: relative;">
							<image src="@/static/img/index/share-fill.png"
								style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
							<text
								style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">分享</text>
							<button open-type="share" class="icon-box"
								style="position: absolute;width: 100%;height:100%;opacity: 0;" @click="sendMessage"></button>
						</view>
						<view @click="addVideo(list)" v-if="!showBtn" class="flex"
							style="opacity: 0.9; margin-top: 17px;">
							<!-- <image class="add-img" src="../../static/dianying.png" mode="widthFix"></image> -->
							<image class="add-img" src="@/static/img/index/xin.png" mode="widthFix"></image>
							<text
								style="color: #FFFFFF;font-size: 14px; text-align: center; margin-top: 10px; font-weight: bold;">追剧</text>
						</view>

					</view>
					<!-- 最底下的文字部分 -->
					<view class="content" v-if="showInfo">
						<view class="userName" :style="'width: '+ (windowWidth - 15) +'px;'">
							<view class="video-tip" @click="showpopu(list,index)">
								『{{title}}』 第{{k+1}}集丨选集 >
							</view>
						</view>
					</view>

					<view class="" v-if="iosFlag == true">
						<!-- 章节结束弹窗 -->
						<van-popup :show="Endshow" @close="onEndClose()" :lock-scroll="true"
							:safe-area-inset-bottom="true" position="bottom" round
							custom-style="height: auto;padding:20px 10px 4px 10px;z-index:101;">
							<view class="popup" v-roll:visible="bodyVisible">
								<!-- 会员弹窗 -->
								<view class="popup1-bottom" v-if="list.is_members == 1&&is_members == 0">
									<view class="popup-text">本集是会员剧集</view>
									<view class="popup-text">感谢您对作者的支持,开通会员后继续观看</view>
									<view>
										<image v-if="is_members == 1" class="icon-Image"
											src="../../static/huiyuan1-01.png" mode=""><text
												style="color: orange;">开通会员即可免费观看</text>
									</view>
									<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
										@click="memberPay(list)">
										会员解锁剧集
									</view>
								</view>
								<!-- 付费弹窗 -->
								<!-- <view class="popup1-bottom" v-if="list.is_pay == 1">
									<view class="popup-text">本集是付费剧集</view>
									<view class="popup-text">感谢您对作者的支持,购买后继续观看</view>
									<text class="popup-btn2" @click="openPay(list)">点击购买本集</text>
									<view class="popup-pay" v-if="is_members == 0" @click="openMemberPay(list)">
										开通会员,充值额外赠送K币 ></view>
									<view class="popup-gold" v-if="list.is_members == 0">账户余额：<text
											style="color: #D81E06;margin-right: 8rpx;">{{book_currency}}</text> K币
									</view>
								</view> -->
								<!--  -->
								<view class="costBox" v-if="list.is_pay == 1">
									<!-- <view>
										充值K币
									</view>
									<view class="weixin-box">
										<view class="">
											<image src="../../static/weixin.png" mode=""></image>
											<text>微信充值</text>
										</view>
										<view class="">
											账户余额：<text style="color: orange;margin-right: 8rpx;">{{book_currency}}</text> K币
										</view>
									</view> -->
									<view class="pay-title"> 《{{title}}》 第{{k+1}}集</view>
									<view class="pay-tips">
										感谢对作者的支持，当前内容需要付费解锁观看，
										<view>谢谢理解!</view>
									</view>
									<view class="pay-episode">
										<text>本集：</text>
										<view>
											<text>{{list.pay_amount}}</text>
											<text>K币</text>
										</view>
									</view>
									<view class="account-info">
										<view style="font-weight: 800;">下集更精彩</view>
										<view>
											当前余额：<text>{{book_currency}}</text> K币
										</view>
									</view>
									<view class="view-list">
										<view v-for="(item,index) in cateList" :key="index"
											:class="{active: index === k_current}" @click="selectCate(item,index)">
											<view class="num1">
												￥{{item.name}}
											</view>
											<view class="num2" v-if="item.type != 2">
												<text>{{item.original_currency}}K币</text>
												<text class="tip"
													v-if="item.send_currency > 0">送{{item.send_currency}}K币</text>
											</view>
											<view v-if="item.type == 2" class="num2" style="color:#d81e06;">
												会员年卡无限看
											</view>
											<view
												:class="item.type == 2 ? 'send_title send_title-members':'send_title'">
												{{item.send_title}}
											</view>
											<view class="saleStyle" v-if="item.label.length>0">
												<text class="saleText">{{item.label}}</text>
											</view>
											<view v-if="index === k_current" class="money-handstyle">
												<image src="../../static/handstyle.png" mode=""></image>
											</view>
										</view>
										<!-- <view class="popup-bottom">
											<text>会员充值可获赠更多K币</text>
											<van-button color="linear-gradient(to right, #f7e622, #b8ae18)" round
												size="normal" @click="goDetailsCenter">
												去开通
											</van-button>
										</view> -->
									</view>
									<view class="openHuiyuan" @click="goCost">
										立即充值
									</view>
								</view>
								<!--  -->
								<!-- <view v-if="list.is_pay == 0&&list.is_members==0">
									<view class="popup1-bottom" v-if="!showBtn">
										<view>--- 加入追剧，每日12点更新一集 ---</view>
										<view class="popup-text">每日12点更新一集</view>
										<view class="popup-text">点击追剧获取更新通知</view>
										<text class="popup-btn" @click="addVideo(list)">追剧</text>
										<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
											@click="memberPay(list)">
											会员解锁剧集
										</view>
									</view>
									<view class="popup1-bottom" v-else>
										<view>--- 追剧成功，每日12点更新一集 ---</view>
										<view class="popup-text">关注公众号</view>
										<view class="popup-text">剧集更新随时掌握</view>
										<text class="popup-btn" @click="gogzh">关注公众号</text>
										<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
											@click="memberPay(list)">
											会员解锁剧集
										</view>
									</view>
								</view> -->
							</view>
						</van-popup>
						<van-popup :show="Endshow2" @close="onEndClose2" :lock-scroll="true"
							:safe-area-inset-bottom="true" position="bottom" 
							custom-style="height: auto;padding:20px 10px 4px 10px;z-index:101;">
							<view class="popup1-bottom" v-if="!showBtn">
								<view v-if="list.is_members == 1&&is_members == 0">--- 本剧为会员专享剧集 ---</view>
								<view v-else-if="list.is_pay == 1">--- 本剧为收费剧集 ---</view>
								<view v-else>--- 连载中，已经看完最新一集 ---</view>
								<view class="popup-text">每日12点更新一集</view>
								<view class="popup-text">点击追剧获取更新通知</view>
								<text class="popup-btn" @click="addVideo(list)">追剧</text>
								<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
									@click="memberPay(list)">
									会员解锁剧集
								</view>
							</view>
							<view class="popup1-bottom" v-else>
								<view v-if="list.is_members == 1&&is_members == 0">--- 本剧为会员专享剧集 ---</view>
								<view v-else-if="list.is_pay == 1">--- 本剧为付费剧集 ---</view>
								<view v-else>--- 追剧成功，每日12点更新一集 ---</view>
								<view class="popup-text">关注公众号</view>
								<view class="popup-text">剧集更新随时掌握</view>
								<text class="popup-btn" @click="gogzh">关注公众号</text>
								<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
									@click="memberPay(list)">
									会员解锁剧集
								</view>
							</view>
						</van-popup>
					</view>
					<!-- 退除追剧弹出层 -->
					<van-popup :show="Mainshow" round custom-style="z-index:101;">
						<view class="Main-popup">
							<view>要追剧吗</view>
							<view class="popup-text">喜欢本剧就加入追剧列表吧！</view>
							<view class="popupBtns">
								<text class="popup-react" @click="reactVideo">不用了</text>
								<text class="popup-add" @click="zjVideo(list)">加入追剧</text>
							</view>
						</view>
					</van-popup>
					<!-- 开通会员弹出层 -->
					<view class="" v-if="iosFlag == true">
						<van-popup :show="membersShow" @close='onCMClose' position="bottom"
							overlay-style="background-color: #000000;"
							custom-style="height: auto;padding:20px 10px 4px 10px;z-index:101;"
							:safe-area-inset-bottom="true" :style="{ width: '100%' }">
							<view class="MainBox">
								<view @click="goMembersPage" style="display: flex;align-items: center;">
									<image v-if="is_members == 1" class="icon-Image" src="../../static/huiyuan1-01.png"
										mode=""><text style="color: orange;">开通会员即可免费观看</text><text
											style="color: #1D1D1D;font-size: 22rpx;">了解更多会员特权 ></text>
								</view>
								<view class="view-list">
									<view v-for="(item,index) in viplist" :key="index"
										:class="{active: index === vip_current}" @click="handleClick(item,index)">
										<view>{{item.moth}}</view>
										<view class="discountPrice">{{item.discountPrice}}</view>
										<view class="originalPrice">{{item.originalPrice}}</view>
									</view>
								</view>
								<view class="openHuiyuan" @click="openHuiyuan">
									立即开通
								</view>
							</view>
						</van-popup>
					</view>
					<!-- K币充值 -->
					<view class="" v-if="iosFlag == true">
						<van-popup :show="costShow" @close="onCMClose" position="bottom"
							overlay-style="background-color: #000000;"
							custom-style="height: auto;padding:20px 10px 4px 10px;z-index:101;"
							:safe-area-inset-bottom="true">
							<view class="costBox">
								<view>
									充值K币
								</view>
								<view class="weixin-box">
									<view class="">
										<image src="../../static/weixin.png" mode=""></image>
										<text>微信充值</text>
									</view>
									<view class="">
										账户余额：<text style="color: orange;margin-right: 8rpx;">{{book_currency}}</text> K币
									</view>
								</view>
								<view class="view-list">
									<view v-for="(item,index) in cateList" :key="index"
										:class="{active: index === k_current}" @click="selectCate(item,index)">
										<view class="num1">
											{{item.name}}
										</view>
										<view class="">
											<text>{{item.original_currency}}</text>
											<text class="tip"
												v-if="item.send_currency.length>0">{{item.send_currency}}</text>
										</view>

										<view class="send_title">
											{{item.send_title}}
										</view>
										<view class="saleStyle" v-if="item.label.length>0">
											<text class="saleText">{{item.label}}</text>
										</view>
									</view>
									<!-- <view class="popup-bottom">
										<text>会员充值可获赠更多K币</text>
										<van-button color="linear-gradient(to right, #f7e622, #b8ae18)" round
											size="normal" @click="goDetailsCenter">
											去开通
										</van-button>
									</view> -->
								</view>
								<view class="openHuiyuan" @click="goCost">
									立即充值
								</view>
							</view>
						</van-popup>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 选集弹窗 -->
		<van-popup :show="show" @close="onClose" :lock-scroll="true" :safe-area-inset-bottom="true" position="bottom"
			custom-style="height: 52%;padding:0px 10px 4px 10px;z-index:101;">
			<view class="popup" v-roll:visible="bodyVisible" style="padding-bottom:0">
				<!-- 	<view class="popup-bottom" v-if="!showBtn">
					<text class="popup-text">每日12点更新一集，点击追剧获取更新通知</text>
					<text class="popup-btn" @click="addVideo(collectList[k])">追剧</text>
				</view>
				<view class="popup-bottom" v-else>
					<text class="popup-text">点击更新提醒了解剧集更新状态</text>
					<text class="popup-btn" @click="getguanzhu">更新提醒</text>
				</view> -->
				<view class="tabs-title">
					<view @click="tabsClick('current')" :class="selectTabs == 'current' ? 'tabs-title-select':''">当前剧集
					</view>
					<view @click="tabsClick('similar')" :class="selectTabs == 'similar' ? 'tabs-title-select':''">相似好剧
					</view>
				</view>
				<view v-if="selectTabs == 'current'">
					<!-- <view class="popup-top">
						{{title}}丨更新至{{collectList.length}}集
					</view> -->
					<view class="current-title">
						<view>
							<view>{{title}}</view>
							<text>更新至{{collectList.length}}集</text>
						</view>
						<view></view>
					</view>
					<view class="episodeTitle-list">
						<view v-for="(item,index) in episodeTitle" :key="index"
							:class="selecttabs2 == index ? 'tabs-title-select': ''" @click="selectTabsTile(index,item)">
							<view>
								{{item}}
							</view>
						</view>
					</view>
					<scroll-view class="episode-scroll-list" :scroll-into-view="toView" :show-bar="false"
						:scroll-y="true" :scroll-with-animation="true">
						<view class="selectBox">
							<view class="selectItem" v-for="(el,index) in collectList" :key="index"
								:id="'MD' + el.sort">
								<!-- <image :class="{active: el.sort === currentIndex}" :src="img" mode=""
									@click="goDetails(el,index)"></image> -->
								<view class="selectText" :class="{active: el.sort === currentIndex}"
									@click="goDetails(el,index)">
									第{{el.sort}}集
								</view>
								<view class="lockBox" v-if="el.is_pay == 1" @click="unLockPay(el,index)">
									<image src="../../static/lock2.png" mode="widthFix"></image>
								</view>
								<view class="lockBox" v-if="el.is_members == 1&&is_members == 0"
									@click="unLockMembers(el,index)">
									<view class="">
										<image src="../../static/lock2.png" mode="widthFix"></image>
										<view class="is_members">
											会员解锁
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="selectTabs == 'similar'" style="height: 100%;">
					<view class="broadcast">
						<view v-for="(item,index) in recommendList" :key="index" @click="tovideo(item)">
							<view class="broadcast-img">
								<img :src="item.cover_img" alt="">
							</view>
							<view class="broadcast-title">{{item.name}}</view>
							<text>更新至{{item.number_of_sets}}集</text>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
		<van-dialog use-slot title="请关注公众号" :show="qrCodeShow" show-cancel-button :show-confirm-button='false'
			bind:close='qrCodeClose'>
			<view style="display: flex;justify-content: center;">
				<image :src="qrCode" mode="widthFix" style="width:200px" show-menu-by-longpress />
			</view>
		</van-dialog>
		<!-- 取消支付 -->
		<van-popup :show="continueShow" @close="closeContinue" round custom-style="z-index:101;">
			<view class="Main-popup">
				<view>真的要离开吗？</view>
				<view class="popup-text">别走嘛~下集更加精彩刺激哦！</view>
				<view class="popupBtns">
					<text class="popup-react" @click="closeContinue">残忍离开</text>
					<text class="popup-add" @click="goCost">继续支付</text>
				</view>
			</view>
		</van-popup>
		<!-- 结束推荐弹窗 -->
		<van-popup :show="endSeries" @close="closeEndSeries" closeable round :lock-scroll="true"
			:safe-area-inset-bottom="true" position="bottom"
			custom-style="height: 56%;padding:35px 13px 10px 13px;z-index:101;">
			<view v-roll:visible="bodyVisible">
				<view class="endSeries-title">
					<view>END~</view>
					<text>本剧已播放到最后一集</text>
				</view>
				<text class="endSeries-tips">为您推荐（大家都在看~）</text>
				<view class="broadcast" style="margin-top: 8rpx;height: 650rpx;">
					<view v-for="(item,index) in recommendList" :key="index" @click="tovideo(item)">
						<view class="broadcast-img">
							<img :src="item.cover_img" alt="">
						</view>
						<view class="broadcast-title">{{item.name}}</view>
						<text>更新至{{item.number_of_sets}}集</text>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		getRecommendVideo,
		getaddPlay,
		getaddHistory,
		getMyLike,
		getSmallTheaterDetails,
		Subscribe,
		getBookGold,
		getBookorder,
		getPayVideo,
		login,
		getMoneyList,
		getMemberPackage,
		getRecommendList,
		appletConfig
	} from '@/module/index.js'
	import FeedbackInfo from '@/wxcomponents/feedback/feedback-info.vue'
	let app = getApp()
	export default {
		components: {
			FeedbackInfo
		},
		data() {
			return {
				continueShow: false,
				isFeedbackPopup: false,
				// ----------
				give_count: 0,
				membersObj: null,
				costObj: null,
				iosFlag: app.globalData.iosFlag,
				costShow: false,
				current: 0,
				membersShow: false,
				showInfo: true,
				book_currency: 0,
				expiration_time: "--",
				BarHeight: 0,
				title: "",
				Mainshow: false,
				show: false,
				Endshow: false,
				Endshow2: false,
				num: 3371,
				sharenum: 521,
				// 双击点赞记录
				fabulousArr: [],
				// 记录点击时间判断单击还是双击，单击暂停，双击点赞
				clickTimer: null,
				// 记录点击时间
				clickTime: 0,
				// 屏幕高度
				windowHeight: uni.getSystemInfoSync().windowHeight || window.innerHeight,

				// 当前轮播的index
				currentIndex: 0,
				// 当前页的视频对象
				currentVideo: null,
				videoList: [],

				id: "",
				collectList: [],
				startData: {
					clientX: 0,
					clientY: 0
				},
				img: "",
				showBtn: false,
				admin: {},
				video_id: "",
				video_detail_id: "",
				nextId: "",
				lastId: "",
				is_members: 0,
				isPay: 0,
				isMembers: 0,
				viplist: [],
				cateList: [],
				windowWidth: 0,
				windowHeight: 0,
				platform: "",
				deleteHeight: 0,
				k: 0,
				oldVideo: "",
				voice: "",
				timeout: "",
				current: 0,
				boxStyle: { //视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},

				videoID: "",
				isShow: true,
				vip_current: 0,
				k_current: 0,
				mask: false,
				touchNum: 0,

				qrCodeShow: false,
				qrCode: null,
				message: [],
				// --------
				selectTabs: "current",
				toView: "",
				selecttabs2: "0",
				episodeTitle: ["1-20", "20-40", "40-60", "60-80", "80-100"],
				noPay: false,
				returnBarTop: "20",
				returnBarHeight: "35",
				recommendList: [],
				endSeries: false,
				ios_pay_switch:true,
				isofficial_account: uni.getStorageSync('environment') == 'official_account' ? true : false
			};
		},
		async onShow() {
			// this.show = true
			await this.$onLaunched
			this.getBookGold()
			if (this.collectList.length !== 0 && (this.collectList[this.k].is_pay !== 1 || this.is_members !== 0)) {
				this.collectList[this.k].state = 'play';
				uni.createVideoContext(this.collectList[this.k].id + '' + this.k, this).play()
			}
			
			if (this.isofficial_account || this.isWechat()) {
				this.returnBarTop = 20
				this.returnBarHeight = 35
				return
			}
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.returnBarTop = menuButtonInfo.top;
			this.returnBarHeight = menuButtonInfo.height;
			this.screenCapture() //截屏 录屏限制
		},
		async onLoad(option) {
			await this.$onLaunched
			if (uni.getStorageSync('token') == "") {
				uni.showToast({
					title: "null",
					icon: "none"
				})
				this.getCode()
			} else {
				this.video_id = option.video_id
				this.video_detail_id = option.video_detail_id
				uni.getSystemInfo({
					success: res => {
						if (res.osName === 'ios') this.getAppletConfig()
					}
				})
			}

			this.platform = uni.getSystemInfoSync().platform
			var model = uni.getSystemInfoSync().model
			if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' ||
					model !==
					'iPhone8')) {
				this.deleteHeight = 0 //有 tabbar的 修改这里可以改变视频高度
			}
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			this.boxStyle.height = this.windowHeight - this.deleteHeight; //有 tabbar的 修改这里可以改变视频高度
			this.getMoneyList()
			this.getMemberPackage()
			this.getlist()
			uni.setNavigationBarTitle({
				title: `第${this.k+1}集`
			})
		},
		onHide() {
			this.collectList[this.k].state = 'pause'; //界面隐藏也要停止播放视频
			uni.createVideoContext(this.collectList[this.k].id + '' + this.k, this).pause(); //暂停以后继续播放
			tt.enableUserScreenRecord()
		},

		async onReady() {
			await this.$onLaunched
			// 初始化拿到第一个视频对象
			this.getVideoDetails(this.video_id, this.video_detail_id)
	
		},
		methods: {
			getAppletConfig() {
				let data = {}
				if (uni.getStorageSync('environment') == 'official_account') {
					return
					// data.official_account_id = uni.getStorageSync('login')?.official_account_id
				} else {
					data.app_id = tt.getEnvInfoSync().microapp.appId
				}
				appletConfig(data).then((res) => {
					if (res.code === 200) {
						this.ios_pay_switch = res.data.ios_pay_switch ? true : false
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			sendMessage(){
				if (this.isofficial_account || this.isWechat()) {
					let that = this
					let official_account_id = uni.getStorageSync('login')?.official_account_id
					let url = `${location.search}&official_account_id=${official_account_id}`;
					     WeixinJSBridge.on('menu:share:appmessage', function(argv){
					          WeixinJSBridge.invoke('sendAppMessage',{
					              "appid":"", //appid 设置空就好了。
					              "img_url": that.img, //分享时所带的图片路径
					              "img_width": "120", //图片宽度
					              "img_height": "120", //图片高度
					              "link":url, //分享附带链接地址
					              "desc":that.title, //分享内容介绍
					              "title":"我发现一个超好看的视频!。"
					          }, function(res){
					              /*** 回调函数，最好设置为空 ***/
					          }); 
					      });
				}
			},
			isWechat() {
				return String(navigator?.userAgent?.toLowerCase()?.match(/MicroMessenger/i)) === "micromessenger";
			},
			tovideo(item) {
				uni.redirectTo({
					url: "/wxcomponents/yjy-video-slide/yjy-video-slide?video_id=" + (item.id) +
						'&video_detail_id=' + (item.video_type_id)
				});
			},
			closeContinue() {
				this.continueShow = false
			},
			selectEpisode(item) {
				this.selectEpis = item
			},
			selectTabsTile(index, item) {
				this.selecttabs2 = index
				this.toView = 'MD' + (item.split('-')[0])
			},
			tabsClick(tabs) {
				this.selectTabs = tabs
			},
			// ----------
			getlist() {
				getRecommendList().then((res) => {
					if (res.code === 200) {
						this.recommendList = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},


			getMemberPackage() {
				getMemberPackage().then((res) => {
					if (res.code === 200) {
						this.viplist = res.data
					}
				})
			},
			goMembersPage() {
				uni.navigateTo({
					url: `/wxcomponents/MembershipCenter/MembershipCenter`,
					fail() {
						uni.switchTab({
							url: `/wxcomponents/MembershipCenter/MembershipCenter`,
							fail() {
								uni.showToast({
									title: '敬请期待',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			// 会员中心
			goDetailsCenter() {
				uni.navigateTo({
					url: `/wxcomponents/MembershipCenter/MembershipCenter`,
					fail() {
						uni.switchTab({
							url: `/wxcomponents/MembershipCenter/MembershipCenter`,
							fail() {
								uni.showToast({
									title: '敬请期待',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			openHuiyuan() {
				this.getBookorder(this.viplist[this.vip_current])
			},
			handleClick(el, index) {
				this.vip_current = index
				this.membersObj = el
			},
			// 微信支付
			selectCate(item, index) {
				this.k_current = index
				this.costObj = item;
			},
			goCost() {
				// 按顺序购买
				for (let v = 0; v < this.k; v++) {
					if (this.collectList[v].is_pay === 1) {
						uni.showToast({
							title: `只能按顺序购买剧集,请先购买前面未解锁剧集！`,
							icon: 'none'
						});
						return
					}
				}
				this.getBookorder2(this.cateList[this.k_current])
			},
			getMoneyList() {
				getMoneyList().then((res) => {
					if (res.code === 200) {
						this.cateList = res.data
					}
				})
			},
			getBookorder(item) {
				let obj = {
					total_fee: item.money,
					name: item.moth,
					number: item.num,
					type: 2,
					video_id: this.video_id
				}
				getBookorder(obj).then((res) => {
					var self = this
					if (res.code === 200) {
						var record_id = res.data.pay_record_id
						uni.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							success(res) {
								self.membersShow = false
								setTimeout(function() {
									self.getBookGold()
									self.Endshow = false
									self.collectList[self.k].state = 'play';
									uni.createVideoContext(self.collectList[self.k].id + '' + self
										.k, self).play()
								}, 1000);
							},
							fail(err) {
								if (err.errMsg = "requestPayment:fail cancel") {
									uni.showToast({
										title: `取消支付`,
										icon: 'none'
									});
								} else {
									uni.showToast({
										title: `支付失败`,
										icon: 'none'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			getBookorder2(item) {
				let obj = {
					total_fee: item.recharge_price * 100,
					name: item.name,
					number: item.sum_currency,
					type:item.type,
					id:item.id,
					video_id: this.video_id
				}
				getBookorder(obj).then((res) => {
					var self = this
					if (res.code === 200) {
						var record_id = res.data.pay_record_id
						if (uni.getStorageSync('environment') == 'official_account') {
							// 公众号调起微信支付
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', {
									"appId": res.data.appId, //公众号ID，由商户传入     
									"timeStamp": res.data.timeStamp, //时间戳，自1970年以来的秒数     
									"nonceStr": res.data.nonceStr, //随机串     
									"package": res.data.package,
									"signType": "MD5", //微信签名方式：     
									"paySign": res.data.paySign //微信签名 
								},
								function(res) {
									if (res.err_msg == "get_brand_wcpay_request:ok") {
										// 使用以上方式判断前端返回,微信团队郑重提示：
										//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
										uni.showToast({
											title: `支付成功`,
											icon: 'success'
										});
										self.costShow = false
										self.Endshow = false
										setTimeout(function() {
											self.getPayVideo(self.collectList[self.k].id)
										}, 1000);
									} else if (res.err_msg == 'get_brand_wcpay_request:fail' || res.err_msg ==
										'get_brand_wcpay_request:cancel') {
										uni.showToast({
											title: `支付失败`,
											icon: 'none'
										});
										self.continueShow = true
									} else {
										uni.showToast({
											title: res.err_msg,
											icon: 'none'
										});
									}
								});
							return
						}
						uni.requestPayment({
							orderInfo: res.data.data,
							service: 5,
							success(res) {
								if (res.code == 0) {
									uni.showToast({
										title: `支付成功`,
										icon: 'success'
									});
									self.costShow = false
									self.Endshow = false
									setTimeout(function() {
										self.getPayVideo(self.collectList[self.k].id)
									}, 1000);
								} else {
									switch (res.code) {
										case 1:
											uni.showToast({
												title: `支付超时`,
												icon: 'none'
											});
											break;
										case 2:
											uni.showToast({
												title: `支付失败`,
												icon: 'none'
											});
											break;
										case 3:
											uni.showToast({
												title: `支付关闭`,
												icon: 'none'
											});
											break;
										case 4:
											uni.showToast({
												title: `支付取消`,
												icon: 'none'
											});
											break;
										default:
											uni.showToast({
												title: `支付异常`,
												icon: 'none'
											});
									}
								}
							},
							fail(err) {
								switch (err.errMsg) {
									case 10000:
										uni.showToast({
											title: `支付失败`,
											icon: 'none'
										});
										break;
									case 10001:
										uni.showToast({
											title: `调起微信失败`,
											icon: 'none'
										});
										break;
									case 10002:
										uni.showToast({
											title: `微信未安装`,
											icon: 'none'
										});
										break;
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			getBookGold() {
				getBookGold().then((res) => {
					if (res.code === 200) {
						this.book_currency = res.data.money //书币
						this.is_members = res.data.is_members //会员
						this.expiration_time = res.data.expiration_time //到期时间
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			memberPay(el) {
				this.membersShow = true
			},
			openPay(el) {
				if (this.book_currency < el.pay_amount) {
					this.costShow = true
				} else {
					this.getPayVideo(el)
				}
			},
			openMemberPay(el) {
				this.membersShow = true
			},
			unLockPay(el, index) {
				this.show = false
				// this.getPayVideo(el)
				this.k = this.current = index
				this.currentIndex = index + 1
			},
			unLockMembers(el, index) {
				this.show = false
				// if (this.is_members == 0 && el.is_members == 1) {
				// 	this.membersShow = true
				// }
				// this.getVideoDetails(el.video_id, el.id)
				this.k = this.current = index
				this.currentIndex = index + 1
			},
			goBack() {
				this.show = false
				if (this.showBtn == true) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.costShow = false
					this.Mainshow = true
				}
			},
			returnBar() {
				if (!this.showBtn) {
					this.Mainshow = true
				} else {
					if (getCurrentPages().length === 1) {
						uni.switchTab({
							url: '/pages/square/square'
						})
					} else {
						uni.navigateBack({
							delta: 1
						});
					}
				}
			},
			reactVideo() {
				this.Mainshow = false
				if (getCurrentPages().length === 1) {
					uni.switchTab({
						url: '/pages/square/square'
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			zjVideo(item) {
				// 发起请求
				let obj = {
					video_id: item.video_id,
					video_detail_id: item.id,
					sort: item.sort
				}
				getaddPlay(obj).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: "追剧成功",
							icon: "none"
						})
						this.showBtn = true
						let stoTimer = setTimeout(() => {
							clearTimeout(stoTimer)
							stoTimer = null
							this.reactVideo()
						}, 1500)
						// uni.navigateBack({
						// 	delta: 1
						// });
						// this.getRecommendVideo()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			getPayVideo(id) {
				let obj = {
					video_detail_id: id
				}
				getPayVideo(obj).then((res) => {
					this.getBookGold()
					this.getVideoDetails(this.video_id, id)
					let stoTimer = setTimeout(() => {
						clearTimeout(stoTimer)
						stoTimer = null
						if (res.code === 500) {
							if (app.globalData.iosFlag == false) {
								return
							}
							uni.showToast({
								title: res.message,
								icon: "none"
							})
							// this.costShow = true
							this.Endshow = true
						}
						// else {
						// 	this.Endshow = false
						// 	this.collectList[this.k].state = 'continue';
						// 	uni.createVideoContext(this.collectList[this.k].id + '' + this.k, this).play()
						// }
					}, 400)
				})
			},
			// 获取视频详情数据
			getVideoDetails(video_id, id) {
				let obj = {
					video_id: video_id,
					video_detail_id: id
				}
				getSmallTheaterDetails(obj).then((res) => {
					if (res.code === 200) {
						this.videoList[0] = res.data.video

						this.give_count = res.data.video.give_count
						this.showBtn = res.data.chase
						this.admin = res.data.admin
						this.img = res.data.cover
						this.title = res.data.video_name
						this.currentIndex = res.data.video.sort
						this.nextId = res.data.video.next
						this.lastId = res.data.video.last

						this.message = res.data
						if (this.message.follow_official_accounts_sort === this.k && this.message
							.is_remind_user_follow === 1 && this.message.follow_official_accounts_url) {
							this.qrCode = this.message.follow_official_accounts_url
							this.qrCodeShow = true;
						}

						uni.setNavigationBarTitle({
							title: `第${res.data.video.sort}集`
						})

						this.isShow = false;
						var msg = res.data.collect
						this.collectList = []
						// 2.这里把视频添加到视频列表
						for (let i = 0; i < msg.length; i++) {
							msg[i].state = 'pause'
							this.collectList.push(msg[i])
						}
						this.k = res.data.video.sort - 1;
						this.current = this.k;
						this.isShow = true;
						// 3.播放当前视频
						setTimeout(() => {
							if (this.collectList[this.k].is_pay === 1 && this.is_members === 0) {
								this.Endshow = true
								this.collectList[this.k].isplay = true
								this.collectList[this.k].state = 'pause';
								uni.createVideoContext(this.collectList[this.k].id + '' + this.k, this)
									.pause();
							} else {
								this.Endshow = false
								this.collectList[this.k].isplay = false
								this.collectList[this.k].state = 'play'
								uni.createVideoContext(this.collectList[this.k].id + '' + this.k, this)
									.play()
								this.collectList[this.k].playIng = true
								this.getaddHistory()
							}
							// this.collectList = [...this.collectList]
							this.$forceUpdate()
						}, 300)
						this.videoID = this.collectList[this.k].id
						// start - 预加载开始
						var p = this.k
							++p
						setTimeout(() => {
							uni.createVideoContext(this.collectList[p].id + '' + p, this).play()
						}, 20)
						clearTimeout(this.timeout)
						this.timeout = setTimeout(() => {
							uni.createVideoContext(this.collectList[p].id + '' + p, this).seek(0)
							uni.createVideoContext(this.collectList[p].id + '' + p, this).pause()
						}, 1500)
						// end - 预加载结束
					} else {
						if (res.code == 104) {
							setTimeout(() => {
								if (getCurrentPages().length === 1) {
									uni.switchTab({
										url: '/pages/square/square'
									})
								} else {
									uni.navigateBack({
										delta: 1
									});
								}
							}, 1000)
						}
					}
				})
			},


			// 滑动切换
			videoPlayChange() {
				this.stopOtherVideo();
				let video = uni.createVideoContext(this.videoList[0].id.toString(), this);
				video.play();
				this.currentStatus = 'play';
				this.currentVideo = video;
			},
			// 暂停其他视频
			stopOtherVideo() {
				this.videoList.map(v => {
					let video = uni.createVideoContext(v.id.toString(), this);
					// video.stop();
					video.seek(1);
					video.pause();
				})
			},
			// 暂停/播放视频/双击点赞事件
			pauseVideo(e) {
				if (this.commontShow) {
					this.commontShow = false;
					return;
				}
				clearTimeout(this.clickTimer);
				let currentTime = new Date().getTime();
				let timeRange = currentTime - this.clickTime;
				if (timeRange < 300) {
					// 双击事件
					this.dbClickAnimation(e);
				} else {
					// 单击事件
					this.clickTimer = setTimeout(() => {
						e.preventDefault();
						e.stopPropagation();
						// if (this.currentStatus == 'play') {
						// 	this.currentVideo.pause();
						// 	this.currentStatus = 'pause';
						// } else {
						// 	this.currentVideo.play();
						// 	this.currentStatus = 'play';
						// }
					}, 300);
				}
				this.clickTime = new Date().getTime();
			},
			// 视频主信息页面
			clickImage(el) {
				return
				uni.navigateTo({
					url: `/wxcomponents/createdWarp/index?id=` + this.admin.admin_id + '&video_id=' + el.video_id
				});
			},
			// 订阅接口
			Subscribe() {
				Subscribe().then((res) => {
					if (res.code === 200) {} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			// 订阅
			getguanzhu() {
				var self = this
				wx.requestSubscribeMessage({
					tmplIds: ['xdw4IeAJAWdrHqqQcmQvGvqlKEOxawlosj5F1CoiB5c',
						"VmFNZ3ak5cYoQm9jyH8C02c4FWGL7mxPKXjBeC_RI_Y"
					],
					success(res) {
						let status = res.errMsg
						if (status == "requestSubscribeMessage:ok") {
							uni.showToast({
								title: `订阅更新提醒成功`,
								icon: "none"
							})
							let stoTimer = setTimeout(() => {
								clearTimeout(stoTimer)
								stoTimer = null
								self.Subscribe()
							}, 500)
						} else {
							uni.showToast({
								title: `小主求订阅`,
								icon: "none"
							})
						}
					},
					fail(res) {},
					complete() {

					}
				})
			},

			gogzh() {
				uni.navigateTo({
					url: "/wxcomponents/officialAccount/officialAccount"
				});
			},
			// 获取观看记录
			getaddHistory() {
				// 发起请求
				let obj = {
					video_id: this.collectList[this.k].video_id,
					video_detail_id: this.collectList[this.k].id
				}
				getaddHistory(obj).then((res) => {
					if (res.code === 200) {} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			// 追剧
			addVideo(item) {
				// 发起请求
				let obj = {
					video_id: item.video_id,
					video_detail_id: item.id,
					sort: item.sort
				}
				getaddPlay(obj).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: "追剧成功",
							icon: "none"
						})
						this.showBtn = true
						// this.getguanzhu()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},

			// 选集弹窗
			showpopu(item, index) {
				this.show = true
			},
			// 选集弹窗按钮
			onClose() {
				this.show = false
			},
			// 自动播放弹窗按钮
			onEndClose() {
				this.Endshow = false
			},
			onEndClose2() {
				this.Endshow2 = false
			},
			onCMClose() {
				this.costShow = false
				this.Endshow = false
				this.membersShow = false
			},

			// 选集播放
			goDetails(el, index) {
				this.onClose()
				this.k = this.current = index
				this.currentIndex = index + 1
			},
			getCode() {
				var self = this
				wx.login({
					success(res) {
						if (res.code) {
							//这里可以设置需要传递的参数
							// return false
							let obj = {
								code: res.code,
							}
							//发起登录请求
							login(obj).then((res) => {
								if (res.code === 200) {
									uni.setStorageSync('token', res.data.token)
								} else {
									uni.showToast({
										title: res.message,
										icon: "none"
									})
								}
							}).catch(err => {})
						} else {}
					}
				})
			},
			closeEndSeries() {
				this.endSeries = false
			},
			ended() {
				// 1.最后一个视频播放结束,弹出推荐剧集
				// 2.播放当前视频结束时触发，自动切换下一个视频
				if (this.k == this.collectList.length - 1) {
					this.endSeries = true
					this.collectList[this.k].state = 'pause';
					uni.createVideoContext(this.collectList[this.k].id + '' + this.k, this).pause();
					return
				}
				this.current = this.k + 1
			},
			//点击播放&&暂停 双击点赞
			tapVideoHover(state, event) {
				if (this.collectList[this.k].is_pay === 1 && this.is_members === 0) {
					if(this.ios_pay_switch){
						this.Endshow = true
					}else{
						uni.showToast({
							title: "抱歉,ios系统暂不支持会员剧集播放!",
							icon: "none"
						})
					}
					this.collectList[this.k].state = 'pause';
					uni.createVideoContext(this.collectList[this.k].id + '' + this.k, this).pause();
					return
				}
				// this.touchNum++;
				// setTimeout(() => {
					// if (this.touchNum == 1) {
							//  直接更改 state 界面暂停图标不显示
						if (state == 'play' || state == 'continue') {
							// this.collectList[this.k].state = 'pause';
							this.$delete(this.collectList[this.k], 'state')
							this.$set(this.collectList[this.k],'state','pause')
						} else {
							// this.collectList[this.k].state = 'continue';
							this.$delete(this.collectList[this.k], 'state')
							this.$set(this.collectList[this.k],'state','continue')
						}
						if (this.collectList[this.k].state == 'continue') {
							uni.createVideoContext(this.collectList[this.k].id + '' + this.k, this)
								.play(); //暂停以后继续播放
						}
						if (this.collectList[this.k].state == 'pause') {
							uni.createVideoContext(this.collectList[this.k].id + '' + this.k, this)
								.pause(); //暂停以后继续播放
						}
					// }
					// if (this.touchNum >= 2) {
					// 	this.doubleLike();
					// }
					// this.touchNum = 0;
				// }, 200)
			},
			change(event) {
				this.k = event.detail.current
				uni.setNavigationBarTitle({
					title: `第${this.k+1}集`
				})
			},
			animationfinish(event) {
				// 最后一个
				if (this.k == this.collectList.length - 1) {
					// this.Endshow2 = true
				}
			},
			// 双击点赞
			doubleLike() {
				this.cLike(this.collectList[this.k], this.k)
			},
			// 点赞
			cLike(list, index) {
				let obj = {
					video_detail_id: list.id,
				}
				getMyLike(obj).then((res) => {
					if (res.code === 200) {
						if (list.is_love == 0) {
							this.collectList[index].give_count += 1;
							this.collectList[index].is_love = 1
						} else {
							this.collectList[index].give_count -= 1;
							this.collectList[index].is_love = 0
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			tozuozhe() {
				uni.navigateTo({
					url: `../wxh5previewVideo/wxh5previewVideo`,
				});
			},
			screenCapture() {
				if (this.isofficial_account) return
				tt.disableUserScreenRecord()
				if (/ios/i.test(tt.getSystemInfoSync().system)) {
						tt.onUserScreenRecord(res => {
							console.log(res.state)
							//	res.state的值有两种情况 start(开始录屏) | end(结束录屏)
							if (res.state == 'start') {
								this.mask = true
							} else {
								this.mask = false
							}
						})
				}
			},
			qrCodeClose() {
				this.qrCodeShow = false
			}
		},
		watch: {
			async k(k, old_k) {
				this.isShow = false
				this.collectList[old_k].playIng = false //如果视频暂停，就加载封面
				this.collectList[old_k].isplay = true
				this.collectList[old_k].state = 'pause'
				uni.createVideoContext(this.collectList[old_k].id + '' + old_k, this).stop()
				this.collectList[k].state = 'play'
				this.isShow = true
				this.currentIndex = this.collectList[k].sort
				
				if (this.message.follow_official_accounts_sort == k && this.message.is_remind_user_follow === 1 && this
					.message.follow_official_accounts_url) {
					this.qrCode = this.message.follow_official_accounts_url
					this.qrCodeShow = true;
				}
				
				await setTimeout(async () => {
					if (this.collectList[k].is_pay == 1 && this.is_members === 0) {
						if (this.book_currency >= this.collectList[k].pay_amount) {
							this.getPayVideo(this.collectList[k].id)
						} else {
							if(this.ios_pay_switch){
								this.Endshow = true
							}
							// this.costShow = true
							this.collectList[k].isplay = true
							this.collectList[k].state = 'pause'
							uni.createVideoContext(this.collectList[k].id + '' + k, this).pause()
						}
					} else if (this.collectList[k].is_members == 1 && this.is_members === 0) {
						this.Endshow = true
						// this.membersShow = true
						this.collectList[k].isplay = true
						this.collectList[k].state = 'pause'
						uni.createVideoContext(this.collectList[k].id + '' + k, this).pause()
					} else {
						this.Endshow = false
						await setTimeout(() => {
							uni.createVideoContext(this.collectList[k].id + '' + k, this).play()
							this.collectList[k].isplay = false
							this.collectList[k].playIng = true
						}, 270)
						this.getaddHistory()
					}
				}, 80)
				var p = k + 1;
			}
		},
		onUnload() {
			// 取消监听用户录屏事件
			tt.offUserScreenRecord()
			tt.enableUserScreenRecord()
		}
	}
</script>

<style lang="scss" scoped>
	@import './yjy-video-slide.css';

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	page {
		position: relative;
	}

	.warp {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100%;
	}

	// 喜欢按钮动画
	.iconxihuan {
		transition: all .3s;
	}

	.iconxihuan:active {
		transform: scale(2);
	}

	// 双击点赞样式
	.fabulous-item {
		position: absolute;
		z-index: 99999;
		width: 100rpx;
		height: 100rpx;
		color: red;
		font-size: 100rpx;
		transition: opacity .5s, transform .5s;
		opacity: 1;
	}



	button {
		background-color: rgba(255, 255, 255, 0);
	}

	.popup {
		position: relative;
		width: 100%;
		padding-bottom: 80rpx;
		box-sizing: border-box;
	}

	.popup-top {
		padding: 10px 0px;
		position: sticky;
		top: 0rpx;
		left: 0rpx;
		z-index: 100000000;
		background-color: #FFFFFF;
	}

	.popup-bottom {
		position: fixed;
		left: 0;
		bottom: 0rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 20rpx 8rpx;
		box-sizing: border-box;
		z-index: 10000;
		height: 100rpx;
		background-color: #EAEAEA;
		flex-direction: initial;
	}

	.popup-text {
		font-size: 24rpx;
	}

	.popup-btn {
		display: inline-block;
		width: 110px;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DF851D;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		// margin-bottom: 20rpx;
	}

	.popup-btn2 {
		display: inline-block;
		width: 140px;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DF851D;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.popup-pay {
		color: #DF851D;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.popup-gold {
		text-align: left;
		position: fixed;
		bottom: 40rpx;
	}

	.popup-vip {
		width: 160px;
		height: 60rpx;
		line-height: 60rpx;
		border: 1px solid #DF851D;
		border-radius: 30rpx;
		color: #DF851D;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin: 0 auto;
	}

	.popupBtns {
		display: flex;
		margin-top: 10rpx 0;
	}

	.Main-popup {
		padding: 30rpx 30rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.popup-add {
		display: inline-block;
		width: 200rpx;
		height: 60rpx;
		margin: 0 15rpx;
		line-height: 60rpx;
		background-color: #d81e06;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin-left: 8rpx;
	}

	.popup-react {
		display: inline-block;
		width: 200rpx;
		height: 60rpx;
		margin: 0 15rpx;
		line-height: 60rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		color: #c8c8c8;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		border: 1px solid #EAEAEA;
	}

	.selectBox {
		display: flex;
		flex-wrap: wrap;
		margin-left: 3%;
		flex-direction: initial;
	}

	// .selectBox:after {
	// 	display: block;
	// 	content: "";
	// 	width: 28%;
	// 	height: 0px;
	// }

	.selectItem {
		width: 28%;
		position: relative;
	}
	.selectItem:nth-child(3n+2) {
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.selectItem image {
		width: 100%;
		height: 260rpx;
		border-radius: 8rpx;
	}

	.selectItem .lockBox {
		width: 100%;
		height: 79rpx;
		border-radius: 8rpx;
		background-color: rgba(190, 190, 190, 0.4);
		text-align: center;
		position: absolute;
		top: 10rpx;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
	}

	.lockBox image {
		width: 20px;
		height: 20px;
		margin: 0 auto;
	}

	.is_members {
		color: #FFFFFF;
		font-size: 20rpx;
	}

	.selectItem .active {
		// border: 1px solid #ff5500;
		// box-shadow: 1px 1px 10px;
		background-color: #d81e06;
		color: #FFF;
	}

	.selectText {
		font-weight: bold;
		font-size: 28rpx;
		// text-indent: 6rpx;
		text-align: center;
		margin: 10rpx 0;
		border-radius: 10rpx;
		padding: 20rpx 0;
		position: relative;
		background-color: #F7F7F7;
	}

	.popup1-bottom {
		text-align: center;
		line-height: 80rpx;
		padding-bottom: 30rpx;
	}

	.openHuiyuan {
		text-align: center;
		color: #FFFFFF;
		// background-color: #F25011;
		background: linear-gradient(to bottom, #FF6347, #d81e06);
		border-radius: 30rpx;
		margin-top: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.icon-Image {
		width: 18px;
		height: 16px;
	}

	.MainBox {
		.view-list {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 24rpx;
			box-sizing: border-box;
		}

		.view-list>view {
			border: 1px solid #808080;
			text-align: center;
			width: 30%;
			padding: 40rpx 0rpx;
		}

		.discountPrice {
			font-weight: 900;
			color: black;
			font-size: 50rpx;
		}

		.originalPrice {
			color: #bebebe;
			text-decoration: line-through;
		}

		.view-list>.active {
			border: 1px solid #f75200;
			background-color: #fea97e;
			opacity: 0.8;
		}
	}

	.costBox {
		.view-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}

		.view-list:after {
			display: block;
			content: "";
			width: 44%;
			height: 0px;
		}

		.view-list>view {
			width: 44%;
			padding: 40rpx 0rpx;
			// border: 1px solid #d9d9d9;
			text-align: center;
			margin: 20rpx 0rpx;
			position: relative;
			// overflow: hidden;
			border-radius: 30rpx;
			background-color: #F5F5F5;
			border: 2rpx solid #F5F5F5;
			box-shadow: 2rpx 2rpx 8rpx 0 rgba(0, 0, 0, 0.1);

			.num1 {
				font-size: 38rpx;
				text-align: center;
				font-weight: 800;
				color: #000000;
			}

			.num2 {
				font-size: 24rpx;
				font-weight: 600;
				color: #8B8989;
				margin: 10rpx 0
			}
		}

		.view-list>.active {
			border: 2rpx solid #d81e06 ;
			background-color: rgba(255, 248, 220, 0.5) ;
		}
		
		.saleStyle {
			position: absolute;
			top: 0;
			right: 0;
			padding: 8rpx 15rpx;
			border-radius: 0 25rpx 0 30rpx;
			background-color: #d81e06;
			color: #ffffff;
			font-size: 20rpx;
		}

		.saleText {
			// position: absolute;
			// top: -68rpx;
			// right: -2rpx;
			// font-size: 20rpx;
			// width: 30px;
			// transform: rotate(45deg);
		}

		.weixin-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.view-list>.popup-bottom {
			background-color: #808080;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 0px 20rpx;
		}

		.tip {
			margin-left: 15rpx;
		}

		.num {
			// font-size: 40rpx;
			// font-weight: 900;
		}

		image {
			width: 60px;
			height: 60px;
			vertical-align: middle;
		}

		.send_title {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			padding: 8rpx 10rpx;
			border-radius: 0 0 30rpx 30rpx;
			color: #d81e06;
			font-weight: 600;
			font-size: 24rpx;
		}

		.send_title-members {
			background-color: #d81e06;
			color: #ffffff;
		}
	}

	.flex {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		flex-grow: 0;
		flex-basis: auto;
		align-items: stretch;
		align-content: flex-start;
	}

	swiper-item {
		position: absolute;
	}

	button {
		margin: 0;
	}

	.container {
		background-color: #000000;
	}

	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}

	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 100rpx;
		flex: 1;
		background-color: rgba(0, 0, 0, 0);
		justify-content: center;
		align-items: center;

		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}

	.playState {
		width: 160rpx;
		height: 160rpx;
		opacity: 0.2;
	}

	.userInfo {
		position: absolute;
		bottom: 110px;
		right: 10px;
		flex-direction: column;

	}

	.userAvatar {
		border-radius: 500%;
		margin-bottom: 15px;
		border-style: solid;
		border-width: 2px;
		border-color: transparent;
	}

	.userAvatar {
		width: 100rpx;
		height: 100rpx;
	}

	.likeIco,
	.shareIco,
	.commentIco {
		width: 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}

	.likeNum,
	.commentNum,
	.shareTex {
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}

	.likeNumActive {
		color: red;
	}

	.content {
		width: 720rpx;
		z-index: 99;
		position: absolute;
		bottom: -30px;
		/* justify-content: center; */
		padding: 15rpx;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
	}

	.userName {
		font-size: 30rpx;
		color: #ffffff;
		// margin-top: 80upx;
	}

	.words {
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
	}

	.root {
		background-color: #000000;
	}

	.add-follow-btn {
		width: 40rpx;
		height: 40rpx;
		padding: 4rpx;
		border-radius: 100%;
		color: white;
		background-color: red;
		position: absolute;
		top: 78rpx;
		left: 50%;
		transform: translateX(-50%);
		font-weight: bold;
		text-align: center;
		line-height: 32rpx;
	}

	.iconjia1 {
		font-size: 24rpx;
	}

	.add-img {
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto;
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		z-index: 9;
	}
</style>
<style scoped lang="scss">
	.feedback {
		position: fixed;
		right: 20rpx;
		top: 200rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		padding: 10rpx 0 10rpx 10rpx;
	}

	.account_feedback {
		position: fixed;
		right: 20rpx;
		top: 40rpx;
		color: #FFFFFF;
		font-size: 26rpx
	}

	.tabs-title {
		background: #FFFFFF;
		z-index: 1000;
		display: flex;
		margin: 0rpx 10rpx 10rpx 10rpx;
		padding-top: 20rpx;
		font-weight: 500;
		font-size: 26rpx;
		text-align: center;
		justify-content: center;
		font-weight: 600;
	}

	.tabs-title>view {
		margin: 0 40rpx;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #ffffff;
	}

	.tabs-title-select {
		color: #d81e06;
		font-size: 28rpx;
		border-bottom: 6rpx solid #d81e06 !important;
	}

	.episode-scroll-list {
		width: 100%;
		height: 450rpx;
		margin: auto;
		font-size: 26rpx
	}

	.current-title {
		margin: 30rpx 0 15rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
	}

	.current-title>view>view {
		font-size: 32rpx;
		margin-bottom: 10rpx;
		font-weight: 800;
	}

	.episodeTitle-list {
		display: flex;
		margin: 50rpx 0 30rpx 0;
		border-bottom: 6rpx solid #fff;
		overflow: auto;
	}

	.episodeTitle-list::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.episodeTitle-list>view>view {
		width: 100rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		margin: 0 20rpx;
		padding-bottom: 5rpx;
		color: #8B8989;

	}

	.tabs-title-select {
		color: #d81e06;
		font-size: 28rpx;
		border-bottom: 6rpx solid #d81e06 !important;
	}

	.pay-title {
		font-size: 38rpx;
		font-weight: 800;
		text-align: center;
	}

	.pay-tips {
		font-size: 26rpx;
		color: #8B8989;
		margin: 15rpx 0;
		padding: 0 20rpx;
		text-align: center;
	}

	.pay-episode {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		text-align: center;
		margin-bottom: 8rpx;
		padding: 0 15rpx;
		// letter-spacing: 2rpx;
		font-size: 22rpx;
		color: #8B8989;
	}

	.pay-episode>view>text {
		color: #8B8989;
		font-size: 22rpx;
	}

	.pay-episode>view>text+text {
		font-size: 22rpx;
		color: #8B8989;
	}

	.account-info {
		display: flex;
		justify-content: space-between;
		color: #8B8989;
		font-size: 26rpx;
		margin-bottom: 20rpx;
		padding: 0 15rpx;
	}

	.account-info>view>text {
		color: #d81e06;
	}

	.money-handstyle {
		position: absolute;
		right: -40rpx;
		bottom: -30rpx;
	}

	.money-handstyle>image {
		width: 60rpx;
		height: 65rpx;
		z-index: 10000;
	}

	.return-bar {
		position: absolute;
		left: 30rpx;
		z-index: 101;

		>image {
			width: 55rpx;
			color: #FFFFFF;
		}
	}

	.broadcast {
		width: 100%;
		height: 680rpx;
		margin-top: 40rpx;
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;

		>view:nth-child(3n+2) {
			margin-left: 5%;
			margin-right: 5%;
		}

		>view {
			width: 30%;
			margin-bottom: 20rpx;
			text-align: center;

			.broadcast-img {
				// width: 200rpx;
				width: 100%;
				height: 320rpx;
				margin: auto;

				img {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			>text {
				color: #999;
				font-size: 20rpx;
				margin-top: -10rpx;
			}

			.broadcast-title {
				// width: 170rpx;
				padding: 15rpx 10rpx 0 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 24rpx;
				font-weight: 600;
			}
		}

	}
	.broadcast::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.endSeries-title {
		text-align: center;
		margin-bottom: 10rpx;
	}

	.endSeries-title>view {
		font-size: 36rpx;
		font-weight: 800;
	}

	.endSeries-title>text {
		font-size: 26rpx;
		color: #999;
	}

	.endSeries-tips {
		font-size: 24rpx;
	}
</style>